<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>
      <div class="hed3">
        <div class="hed">
          <span>您的当前位置：</span>
          <span>首页</span>
          <span> > </span>
          <span>全部商品</span>
          <span>  >  </span>
          <span>苹果</span>
          <span>  >  </span>
          <span>阿克苏</span>
        </div>
        <Maginfrying></Maginfrying>
      </div>
      <div class="hed4">
        <div class="hed4-tit">
          <span :class="{act:cur==index}" @click="isshowzu(index)" v-for="(item,index) in data">{{item}}</span>
        </div>
        <component :is="com"></component>
      </div>

      <div @click="xiaoshi()" v-if="bols" class="zheceng">
        <div class="ze-center">
          <div class="ze-d1">
            <img src="/static/lyl/888.png" alt="">
            <span>已成功加入购物车</span>
          </div>
          <router-link to="/">
            <button @click="xiaoshi()">继续购物</button>
          </router-link>
          <router-link to="/shopyes/1">
            <button class="shop3" @click="xiaoshi()">查看购物车</button>
          </router-link>
        </div>
      </div>

      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Nav2 from '../com/Nav2'
  import Footer from '../com/Footer'
  import Maginfrying from './Maginfrying'
  import Xiang1 from './Xiang1'
  import Xiang2 from './Xiang2'
    export default {
      name: "Detail",
      data(){
        return {
          data:['商品详情','商品评价'],
          cur:0,
          com:'Xiang1'
        }
      },
      computed:{
        bols(){
          var bol4 = this.$store.state.bol3;
          return bol4;
        }
      },
      methods:{
        isshowzu(i){
          this.cur = i;
          this.com = 'Xiang'+(i+1);
        },
        xiaoshi(){
          this.$store.commit('change5')
        }
      },
      components:{
        Nav,
        Nav2,
        Footer,
        Maginfrying,
        Xiang1,
        Xiang2
      }
    }
</script>

<style scoped>
  .hed3{
    border-top: 1px solid #ccc;
  }
  .hed{
    width: 1260px;
    margin:20px auto;
    padding: 20px 0 20px 20px;
    background: #f4f4f4;
  }
  .hed span{
    font-size: 14px;
  }
  .hed4{
    width: 1280px;
    margin:0 auto 40px;
    border: 1px solid #e4e4e4;
  }
  .hed4 .hed4-tit{
    background: #f4f4f4;
    height: 50px;
    border-bottom: 1px solid #e4e4e4;
  }
  .hed4 .hed4-tit span{
    display: inline-block;
    width: 125px;
    height: 49px;
    font-size: 18px;
    text-align: center;
    line-height: 49px;
    border-right: 1px solid #e4e4e4;
    cursor: pointer;
  }
  .hed4 .hed4-tit .act{
    background: #fff;
    border-top: 2px solid #498e3d;
    color: #498e3d;
  }

  .zheceng{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  .zheceng .ze-center{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 652px;
    height: 312px;
    background: #fff;
    border: 2px solid #e2e2e2;
  }
  .zheceng .ze-center .ze-d1{
    margin: 76px 0 60px;
  }
  .zheceng .ze-center .ze-d1 img{
    width: 40px;
    vertical-align: bottom;
    margin-right: 20px;
  }
  .zheceng .ze-center .ze-d1 span{
    font-size: 24px;
    color: #666;
  }
  .zheceng .ze-center button{
    width: 170px;
    height: 45px;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    background: #f08200;
    cursor: pointer;
  }
  .zheceng .ze-center .shop3{
    background: #498e3d;
    margin-left: 40px;
  }
</style>
